<template>
  <el-dialog title="详情" :visible.sync="show" width="1200px" append-to-body :before-close="close">
    <el-form ref="form" :model="form" label-width="140px" label-position="left">
      <el-divider content-position="center">基本信息</el-divider>

      <el-row>
        <el-col :span="8">
          <el-form-item prop="orderId">
            <span slot="label">
              订单编号:
            </span>
            {{ form.orderId }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实付金款:" prop="realPayment">
            {{ form.realPayment }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="orderDate">
            <span slot="label">
              订单时间:
            </span>
            {{ form.orderDate }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="contactName">
            <span slot="label">
              <!--              <el-tooltip content="支付企业在海关注册登记的企业名称" placement="top">-->
              <!--                <i class="el-icon-info" />-->
              <!--              </el-tooltip>-->
              收货人姓名:
            </span>
            {{ form.contactName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="contactMobile">
            <span slot="label">
              联系方式:
            </span>
            {{ form.contactMobile }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="postcode">
            <span slot="label">
              行政邮编:
            </span>
            {{ form.postcode }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="contactAddr">
            <span slot="label">
              收货地址:
            </span>
            {{ form.contactAddr }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="detailAddr">
            <span slot="label">
              详细地址:
            </span>
            {{ form.detailAddr }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="task_no">
            <span slot="label">
              <el-tooltip content="时美物流批次号" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>
              所属批次:
            </span>
            {{ form.task_no }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider content-position="center">回执信息</el-divider>

      <el-row>
        <el-col :span="8">
          <el-form-item prop="contactAddr">
            <span slot="label">
              物流状态:
            </span>
            {{ this.statusFormat(form.logistics_status, this.logisticsStatusOptions) }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="error_msg">
            <span slot="label">
              快递公司:
            </span>
            {{ form.express_company }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="error_msg">
            <span slot="label">
              快递单号:
            </span>
            {{ form.express_no }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="contactAddr">
            <span slot="label">
              运单状态:
            </span>
            {{ this.statusFormat(form.waybill_status, this.waybillStatusOptions) }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="error_msg">
            <span slot="label">
              运单号:
            </span>
            {{ form.bill_no }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="error_msg">
            <span slot="label">
              回执信息:
            </span>
            {{ form.error_msg }}
          </el-form-item>
        </el-col>

      </el-row>
      <el-divider content-position="center">商品信息</el-divider>

      <el-table :data="form.goodsListStr" border stripe style="width: 100%;">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="原产国(地区)编码">
                {{ getJson(scope.row.origin_country_code,2) }}
              </el-form-item>
              <el-form-item label="贸易国编号">
                {{ getJson(scope.row.trade_country_code,2) }}
              </el-form-item>
              <el-form-item label="规格型号">
                {{ scope.row.g_model }}
              </el-form-item>
              <el-form-item label="币制">
                {{ getJson(scope.row.currency_code,1) }}
              </el-form-item>
              <el-form-item label="计量单位">
                {{ getJson(scope.row.unit,3) }}
              </el-form-item>
              <el-form-item>
                <span slot="label">
                  计量数量
                  <el-tooltip content="商品数量*组合规格" placement="top">
                    <i class="el-icon-info" />
                  </el-tooltip>
                </span>
                {{ scope.row.num*scope.row.spec_qty }}
              </el-form-item>
              <el-form-item label="法定计量单位">
                {{ getJson(scope.row.unit1,3) }}
              </el-form-item>
              <el-form-item label="法定计量数量">
                {{ scope.row.qty1 }}
              </el-form-item>
              <el-form-item label="法定第二计量单位">
                {{ getJson(scope.row.unit2,3) }}
              </el-form-item>
              <el-form-item label="法定第二计量数量">
                {{ scope.row.qty2 }}
              </el-form-item>
              <el-form-item label="净重（KG）">
                {{ scope.row.net_weight }}
              </el-form-item>
              <el-form-item label="毛重（KG）">
                {{ scope.row.gross_weight }}
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="RecordMaterialNo" label="账册备案料号">
          <template slot-scope="scope">
            {{ scope.row.record_material_no }}
          </template>
        </el-table-column>
        <el-table-column prop="goods_name" label="电商平台品名">
          <template slot-scope="scope">
            {{ scope.row.goods_name }}
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="海关登记品名">
          <template slot-scope="scope">
            {{ scope.row.g_name }}
          </template>
        </el-table-column>

        <el-table-column prop="GCode" label="海关编码">
          <template slot-scope="scope">
            {{ scope.row.g_code }}
          </template>
        </el-table-column>
        <el-table-column prop="barcode" label="条形码">
          <template slot-scope="scope">
            {{ scope.row.barcode }}
          </template>
        </el-table-column>
        <el-table-column prop="num" label="商品数量">
          <template slot-scope="scope">
            {{ scope.row.num }}
          </template>
        </el-table-column>
        <el-table-column prop="spec_qty" label="组合规格">
          <template slot-scope="scope">
            {{ scope.row.spec_qty }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价">
          <template slot-scope="scope">
            {{ scope.row.price }}
          </template>
        </el-table-column>
      </el-table>
      <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
        <el-col :span="24">
          <el-button size="medium" @click="close()">关 闭</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<style>
.el-divider--horizontal {
  margin: 40px 0;
}
.el-divider__text.is-center {
  font-size: large;
  font-weight: 600;
}
</style>

<script>
export default {
  name: 'OrderDetails',
  props: {
    form: {
      type: Object,
      default() {
        return {}
      }
    },
    show: {
      type: Boolean
    }
  },
  data() {
    return {
      // 物流接口状态
      logisticsStatusOptions: [
        { label: '未推送', value: 0 },
        { label: '已完成', value: 1 },
        { label: '已推送', value: 2 },
        { label: '已失败', value: 3 },
        { label: '已加入', value: 4 }
      ],
      // 运单接口状态 0:未推送  1:推送成功 2:新增申报成功 20:推送失败 120:海关入库
      waybillStatusOptions: [
        { label: '未推送', value: 0 },
        { label: '推送成功', value: 1 },
        { label: '新增申报成功', value: 2 },
        { label: '推送失败', value: 20 },
        { label: '海关入库', value: 120 }
      ]
    }
  },
  created() {
  },
  methods: {
    close() {
      this.$emit('update:show', false)
    },
    /** 状态转换 */
    statusFormat(field, Options) {
      for (const d of Options) {
        if (field === d.value) {
          field = d.label
          break
        }
      }
      return field
    }

  }
}
</script>
